.card {
  margin: 15px; /* 外边距 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.2s, box-shadow 0.2s; /* 添加 box-shadow 的过渡效果 */
}

.card:hover {
  transform: scale(1.05); /* 悬停时放大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时增加阴影 */
}

.card-img-top {
  width: 100%; /* 图片宽度自适应 */
  height: 150px; /* 设置高度为 150px */
  object-fit: cover; /* 图片裁剪方式 */
  border-top-left-radius: 8px; /* 圆角 */
  border-top-right-radius: 8px; /* 圆角 */
}

.card-body {
  text-align: center; /* 文本居中 */
}

.card-title {
  font-size: 1rem; /* 将标题字体大小调整为 1rem */
  font-weight: bold; /* 加粗 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  white-space: nowrap; /* 不换行 */
}

.card-text {
  font-size: 0.875rem; /* 将描述字体大小调整为 0.875rem */
  color: #555; /* 描述颜色 */
  overflow: hidden; /* 隐藏超出部分 */
  display: -webkit-box; /* 使用盒子模型 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  /* -webkit-line-clamp: 3; 限制为三行 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.btn-primary {
  background-color: #28a745; /* 按钮背景色改为绿色 */
  border-color: #28a745; /* 按钮边框色改为绿色 */
}

.btn-primary:hover {
  background-color: #218838; /* 悬停时按钮背景色改为深绿色 */
  border-color: #1e7e34; /* 悬停时按钮边框色改为深绿色 */
}
